import React, { useEffect } from "react";
import styles from "./index.module.less";
import Mbottom from "@components/mBottom";
import headImg from "@images/sex1.webp";
import { useNavigate } from "react-router-dom";
import { connect } from "react-redux";
import {
    getChatUsersListAction,
    changeManyToReadAction,
    getLoginProfileAction,
} from "@redux/actions";
import moment from "moment";
import socket from "@depjs/globalSocket";
import _ from "lodash";

const Chat = (props) => {
    const {
        chatUserList,
        getChatUsersListAction,
        changeManyToReadAction,
        getLoginProfileAction,
        profile,
    } = props;

    const navigate = useNavigate();

    useEffect(() => {
        getLoginProfileAction();
    }, [getLoginProfileAction]);

    useEffect(() => {
        getChatUsersListAction();
    }, [getChatUsersListAction]);

    useEffect(() => {
        socket.on("connect", () => {
            // console.log('profile: ', profile)
            socket.on("receiveMsg", (msg) => {
                if (
                    msg.from === profile.userName ||
                    msg.to === profile.userName
                ) {
                    const getChatUsersList = _.once(getChatUsersListAction);
                    getChatUsersList();
                }
            });
        });
    }, [getChatUsersListAction, profile.userName]);

    return (
        <div className={styles.chat_wrap}>
            <p className={styles.chat_title}>消息</p>
            <div className={styles.chat_main}>
                <input
                    type="text"
                    className={styles.inp}
                    placeholder="搜索联系人/聊天记录"
                />
                {chatUserList &&
                    chatUserList.length > 0 &&
                    chatUserList.map((item, index) => {
                        return (
                            <div key={index} className={styles.chat_item}>
                                <div
                                    className={styles.chat_inner}
                                    onClick={() => {
                                        navigate(
                                            `/m/chat/chatWindow?goodsId=${item.goodsId}&loginUser=${item.loginUser}&toUser=${item.chatName}`
                                        );
                                        changeManyToReadAction(
                                            item.goodsId,
                                            item.chatName
                                        );
                                    }}
                                >
                                    <div className={styles.avatar}>
                                        <img src={headImg} alt="" />
                                        {item.unReadNumbers ? (
                                            <span
                                                className={styles.msg_numbers}
                                            >
                                                {item.unReadNumbers}
                                            </span>
                                        ) : null}
                                    </div>
                                    <div className={styles.rig}>
                                        <p className={styles.p1}>
                                            {item.chatName}
                                        </p>
                                        <p className={styles.p2}>
                                            {item.latestMsg}
                                        </p>
                                    </div>
                                </div>
                                <div className={styles.goods_img}>
                                    <img src={item.goodsImg} alt="" />
                                    <br />
                                    <span className={styles.show_last_date}>
                                        {moment(item.latestChatDate).format(
                                            "YYYY-MM-DD HH:mm:ss"
                                        )}
                                    </span>
                                </div>
                            </div>
                        );
                    })}
            </div>
            <Mbottom />
        </div>
    );
};

export default connect(
    (state) => ({
        chatUserList: state.chatUsersListReducer,
        profile: state.loginProfileReducer,
    }),
    { getChatUsersListAction, changeManyToReadAction, getLoginProfileAction }
)(Chat);
